<template>
  <view class="page-container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="back-btn" @tap="handleBack">
        <text class="icon">←</text>
      </view>
      <text class="title">新增记录</text>
      <view class="save-btn" @tap="handleSave">
        保存
      </view>
    </view>

    <!-- 表单内容 -->
    <scroll-view class="form-content" scroll-y enable-flex>
      <view class="form-wrapper">
        <!-- 时间选择 -->
        <view class="form-item">
          <text class="label">时间</text>
          <view class="time-picker" @tap="showTimePicker">
            <text class="time-text">{{ formData.time || '请选择时间' }}</text>
            <text class="arrow">></text>
          </view>
        </view>

        <!-- 标题输入 -->
        <view class="form-item">
          <text class="label">标题</text>
          <input 
            type="text"
            v-model="formData.title"
            placeholder="请输入标题"
            placeholder-class="input-placeholder"
            class="input"
          />
        </view>

        <!-- 位置选择 -->
        <view class="form-item">
          <text class="label">位置</text>
          <view class="location-picker" @tap="chooseLocation">
            <text class="location-text">{{ formData.location || '请选择位置' }}</text>
            <text class="arrow">></text>
          </view>
        </view>

        <!-- 描述输入 -->
        <view class="form-item">
          <text class="label">描述</text>
          <textarea
            v-model="formData.description"
            placeholder="请输入描述内容"
            placeholder-class="input-placeholder"
            class="textarea"
          />
        </view>

        <!-- 标签选择 -->
        <view class="form-item">
          <text class="label">标签</text>
          <view class="tags-container">
            <view 
              class="tag-item"
              :class="{ active: selectedTags.includes(tag) }"
              v-for="(tag, index) in tags"
              :key="index"
              @tap="toggleTag(tag)"
            >
              {{ tag }}
            </view>
            <view class="add-tag" @tap="showAddTagInput">
              <text class="plus">+</text>
            </view>
          </view>
        </view>

        <!-- 图片上传 -->
        <view class="form-item">
          <text class="label">图片</text>
          <view class="image-uploader">
            <view 
              class="image-item" 
              v-for="(image, index) in formData.images" 
              :key="index"
            >
              <image :src="image" mode="aspectFill"></image>
              <view class="delete-btn" @tap.stop="deleteImage(index)">×</view>
            </view>
            <view class="upload-btn" @tap="chooseImage" v-if="formData.images.length < 9">
              <text class="plus">+</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
  time: '',
  title: '',
  location: '',
  description: '',
  images: []
})

const tags = ref(['运动', '工作', '学习', '娱乐', '饮食', '休息'])
const selectedTags = ref([])

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 保存记录
const handleSave = () => {
  if (!formData.time) {
    uni.showToast({
      title: '请选择时间',
      icon: 'none'
    })
    return
  }
  if (!formData.title) {
    uni.showToast({
      title: '请输入标题',
      icon: 'none'
    })
    return
  }
  
  // TODO: 保存数据到服务器
  uni.showLoading({
    title: '保存中'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 1000)
}

// 显示时间选择器
const showTimePicker = () => {
  uni.showTimePicker({
    success: (res) => {
      formData.time = res.time
    }
  })
}

// 选择位置
const chooseLocation = () => {
  uni.chooseLocation({
    success: (res) => {
      formData.location = res.name
    }
  })
}

// 切换标签
const toggleTag = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else {
    selectedTags.value.push(tag)
  }
}

// 显示添加标签输入框
const showAddTagInput = () => {
  uni.showModal({
    title: '添加标签',
    editable: true,
    placeholderText: '请输入标签名称',
    success: (res) => {
      if (res.confirm && res.content) {
        tags.value.push(res.content)
      }
    }
  })
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - formData.images.length,
    success: (res) => {
      formData.images.push(...res.tempFilePaths)
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  formData.images.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  
  .nav-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background: rgba(255,255,255,0.1);
    
    .back-btn {
      padding: 10rpx;
      .icon {
        color: #fff;
        font-size: 36rpx;
      }
    }
    
    .title {
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .save-btn {
      color: #667eea;
      font-size: 28rpx;
      padding: 10rpx 20rpx;
    }
  }
  
  .form-content {
    flex: 1;
    overflow: hidden;
    
    .form-wrapper {
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      
      .form-item {
        margin-bottom: 40rpx;
        
        .label {
          color: rgba(255,255,255,0.8);
          font-size: 28rpx;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .input, .textarea {
          background: rgba(255,255,255,0.1);
          border-radius: 12rpx;
          padding: 20rpx;
          color: #fff;
          width: 100%;
          box-sizing: border-box;
        }
        
        .textarea {
          height: 180rpx;
          width: 100%;
        }
        
        .time-picker, .location-picker {
          background: rgba(255,255,255,0.1);
          border-radius: 12rpx;
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .time-text, .location-text {
            color: #fff;
            font-size: 28rpx;
          }
          
          .arrow {
            color: rgba(255,255,255,0.6);
            font-size: 24rpx;
          }
        }
        
        .tags-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
          
          .tag-item, .add-tag {
            padding: 12rpx 24rpx;
            border-radius: 30rpx;
            font-size: 24rpx;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.8);
            
            &.active {
              background: #667eea;
              color: #fff;
            }
          }
          
          .add-tag {
            display: flex;
            align-items: center;
            justify-content: center;
            .plus {
              font-size: 28rpx;
            }
          }
        }
        
        .image-uploader {
          display: flex;
          flex-wrap: wrap;
          gap: 20rpx;
          
          .image-item, .upload-btn {
            width: 180rpx;
            height: 180rpx;
            border-radius: 12rpx;
            overflow: hidden;
            position: relative;
          }
          
          .image-item {
            image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            .delete-btn {
              position: absolute;
              top: 10rpx;
              right: 10rpx;
              width: 40rpx;
              height: 40rpx;
              background: rgba(0,0,0,0.5);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 24rpx;
            }
          }
          
          .upload-btn {
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            
            .plus {
              color: rgba(255,255,255,0.8);
              font-size: 48rpx;
            }
          }
        }
      }
    }
  }
}

.input-placeholder {
  color: rgba(255,255,255,0.3);
}
</style>
